<template>
    <div>
        <div style="text-align: right; margin-right:20px;" v-if="toolbar">
            <common-button text="导出"
                           @click="exportList()">
            </common-button>
        </div>
        <div style="overflow-x: auto">
            <el-table
                    :data="data"
                    v-loading.iTable="loading"
                    :stripe="true"
                    ref="mutipleTable"
                    :height="height"
                    :highlight-current-row="true"
                    @selection-change="handleSelectionChange"
                    @row-click="rowClick"
                    border
                    :tree-props="{children: 'children'}"
                    :row-key="rowKey"
                    header-row-class-name="tableHeader"
                    class="commonTable"
                    tooltip-effect="dark"
                    show-overflow-tooltip="true"
                    style="width: 100%">
                <el-table-column v-if="mutiSelect" type="selection" style="width: 55px;">
                </el-table-column>
                <!--region 按钮操作组-->
                <el-table-column v-if="operates&&(operates.align=='left')" label="操作" align="center"
                                 :fixed="operates.fixed"
                                 :width="operates.width">
                    <template slot-scope="scope">
                        <div class="operate-group">
                            <template v-for="(btn, key) in operates.list">
                                <div class="item" v-if="btn.show !== false && (btn.isShow == undefined || btn.isShow(scope.row))" :key='btn.id'>
                                    <template v-if="btn.cls">
                                        <image-button :cls="btn.cls" :disabled="btn.disabled"
                                                      @click.stop="btn.method(key,scope.row)">
                                        </image-button>
                                    </template>
                                    <template v-else>
                                        <inner-button :type="btn.type" size="mini" :icon="btn.icon"
                                                      :disabled="btn.disabled"
                                                      :text="btn.label"
                                                      :plain="btn.plain" @click.stop="btn.method(key,scope.row)">
                                        </inner-button>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <!--endregion-->
                <template v-for="(column, index) in columns">
                    <el-table-column :prop="column.propertyName"
                                     v-if="!column.hidden"
                                     :key='column.propertyName'
                                     :label="column.caption"
                                     :fixed="column.fixed"
                                     :align="column.textAlignment"
                                     :sortable="systemSort&&column.allowSort"
                                     :show-overflow-tooltip="true"
                                     :min-width="column.minWidth"
                                     :width="column.width">
                        <template slot-scope="scope">
                            <template v-if="!column.render">
                                <template v-if="column.formatter">
                                    <span v-html="column.formatter(scope.row, column)"></span>
                                </template>
                                <template v-else>
                                    {{scope.row[column.propertyName]}}
                                </template>
                            </template>
                            <template v-else>
                                <expand-dom :column="column" :row="scope.row" :render="column.render"
                                            :index="index"></expand-dom>
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <!--region 按钮操作组-->
                <el-table-column v-if="operates&&(operates.align == undefined || operates.align=='right')" label="操作"
                                 align="center" :fixed="operates.fixed?'right':false"
                                 :width="operates.width">
                    <template slot-scope="scope">
                        <div class="operate-group">
                            <template v-for="(btn, key) in operates.list">
                                <div class="item" v-if="btn.show !== false && (btn.isShow == undefined || btn.isShow(scope.row))" :key='btn.id'>
                                    <template v-if="btn.cls">
                                        <image-button :cls="btn.cls" :disabled="btn.disabled"
                                                      @click.stop="btn.method(key,scope.row)">
                                        </image-button>
                                    </template>
                                    <template v-else>
                                        <inner-button :type="btn.type" size="mini" :icon="btn.icon"
                                                      :disabled="btn.disabled"
                                                      :text="btn.label"
                                                      :plain="btn.plain" @click.stop="btn.method(key,scope.row)">
                                        </inner-button>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <!--endregion-->
            </el-table>
            <el-col :span="24" class="pager">
                <el-pagination layout="total, sizes, prev, pager, next, jumper"
                               @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :page-sizes="[30,50,100]" :page-size="pageSize" :total="total"
                               style="float:right;">
                </el-pagination>
            </el-col>
        </div>
    </div>
</template>

<script>
    import Service from '../../../services/common.service'
    import {exportExcel} from '../../../../utils/excel/util'

    export default {
        data() {
            return {
                data: [],
                total: 0,
                pageSize: 50,
                page: 1,
                parameters: {},
                loading: false,
                systemSort: true
            }
        },
        components: {
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null
                    },
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index
                    }
                    if (ctx.props.column) params.column = ctx.props.column
                    return ctx.props.render(h, params)
                }
            }
        },
        watch: {
            params(val) {
                this.setParameters(val)
            }
        },
        mounted() {

        },
        created: function () {
            this.page = 1;
            if(window.localStorage.getItem("systemSetting")) {
                let settings = JSON.parse(window.localStorage.getItem("systemSetting"));
                let showSort = settings['ui.table.column.header.showSort'] == undefined ? true : settings['ui.table.column.header.showSort'];
                this.systemSort = (showSort == false || (''+showSort).toUpperCase() == 'FALSE') ? false : true;
            }
        },
        methods: {
            reset() {
                const me = this;
                me.page = 1;
                setTimeout(function(){
                    me.getData()
                },50);
            },
            refresh() {
                this.getData();
            },
            setParameters(val) {
                this.parameters = val;
                if (this.autoPost) {
                    this.reset();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.$emit('selection-change', val)
            },
            // 显示 表格操作弹窗
            showActionTableDialog() {
                this.$emit('handelAction')
            },

            rowClick(row, column, event) {
                this.$emit('rowClick', row, column, event)
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.getData();
            },

            handleCurrentChange(val) {
                this.page = val;
                this.getData();
            },

            getData() {
                const me = this;
                me.parameters = me.params;
                me.parameters['page'] = me.page;
                me.parameters['pageSize'] = me.pageSize;
                me.loading = true;
                Service.post(me.url, me.parameters).then((res) => {
                    me.loading = false;

                    if (res.data.succeeded == true) {
                        me.data = res.data.data;
                        me.total = res.data.totalRecords;
                    } else {
                        me.data = [];
                        me.total = 0;
                    }
                });
            },

            exportList(fileName) {
                const me = this;
                if(!fileName){
                    fileName = 'ExportData';
                }
                let data = JSON.parse(JSON.stringify(me.data));
                for(let col of me.columns) {
                    if(col.formatter) {
                        for (let item of data) {
//                            if(item)

                        }
                    }
                }
                exportExcel(me.columns, me.data, fileName + '-' + this.page);
            }
        },
        props: {
            /*data: {
                type: Array,
                default: function () {
                    return [];
                }
            },*/

            columns: {
                type: Array,
                default: () => []
            },

            operates: {},

            mutiSelect: false,

            height: Number,

            url: String,

            params: {
                type: Object,
                default: () => {
                }
            },

            autoPost: {
                type: Boolean,
                default: false
            },
            toolbar: {
                type: Boolean,
                default: false
            },
            rowKey: {
                type: String,
                default: 'id'
            }

        },
    }
</script>
<style lang="scss" scoped>
    /*.commonTable {
        margin-top: 3px;
        td, th{
            padding: 4px 0;
            text-align: center;
        }
        td{
            font-size: 0.875rem;
            color: #333;
        }
        .tableHeader th{
            background-color: #205193;
            color: #fff;
            padding: 5px 0;
            text-align: center;
            border-right: 1px solid #EBEEF5 !important;
        }
    }*/
</style>
